<template>
  <div
      class="dialog"
      v-show="dialogVisible"
  >
      <div class="dialog-data">
        <div class="dialog-img">
          <img src="https://staticmedia.remo-ai.com/image/default/3787BA46DFA348F7A53CE0840756778D-6-2.jpg" alt="">
        </div>
        <div class="dialog-content">
          <div class="close">
            <el-button type="danger" :icon="Close"  class="close-botton" @click="handleClose" circle />
          </div>
          <h3 style="margin-bottom: 20px">LIN | STORE</h3>
          <p style="margin-bottom: 20px">Be the first to receive the latest product updates, offers and news.</p>
          <form>
            <el-input v-model="email" type="email" placeholder="Please your email" required oninvalid="setCustomValidity('Please your email')" class="email-input"/><br>
            <button  type="submit" class="email-botton">Join in</button >
          </form>
          <p>Join our<a href="https://www.facebook.com/" style="font-weight: bold"> Facebook Group</a>to share ideas and get help.</p>
        </div>
      </div>
  </div>
</template>



<script lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Close
} from '@element-plus/icons-vue'
import {Bottom, CaretBottom} from "@element-plus/icons-vue";

  export default {
    name: "Dialog",
    components: {CaretBottom, Bottom},
    setup(){
      const data = reactive({
        dialogVisible: ref(true),
        dialogCustomClass: 'dialog-data-div',
        email: ref(null)
      })

      const handleClose = () => {
        data.dialogVisible = false
      }


      return{
        ...toRefs(data),
        handleClose,
        Check,
        Delete,
        Close
      }
    }
  };
</script>

<style scoped>

.dialog {
  border-radius: 10px;
  height: 400px;
  width: 690px;


}
.dialog-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  width: auto;
}

.dialog-img {

}
.dialog-img img{
  width: 250px;
  height: 400px;

}

.el-dialog {
  height: 400px !important;
  width: 100% !important;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  text-align: center;
  background: #eaeaea;
  height: 400px;
  width: auto;
}

.dialog-content h3 {
  font-size: 30px;
}

.dialog-content p {
  font-size: 15px;
  text-align: center;
  margin-left: 10px;
}

.email-input {
  width: 60%;
  height: 50px;
  margin-bottom: 10px;
  font-size: 15px;
}

.email-botton {
  width: 60%;
  height: 50px;
  background: #e60033;
  border: 0;
  transition: all 0.5s;
  margin-bottom: 20px
}

.email-botton:hover {
  background: 0;
  border: 1px solid black;
  cursor:pointer;
}

.close {
  width: 60px;
  text-align: center;
  border: 0;
  margin-top: 10px;
  margin-left: 380px;
}

.close-botton {
  background: 0;
  border: 0;
  color: black;
  font-size: 15px;
}

*:required {
  font-size: 14px;
}


</style>